// 用户端统一设计系统
// ================================

// 设计令牌 (Design Tokens)
// ================================

// 颜色系统 - Element Plus 默认蓝色系
$primary-gradient: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
$secondary-gradient: linear-gradient(135deg, #79bbff 0%, #a0cfff 100%);
$accent-gradient: linear-gradient(135deg, #409eff, #337ecc);
$success-gradient: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
$warning-gradient: linear-gradient(135deg, #e6a23c 0%, #eebe77 100%);

// 玻璃拟态颜色
$glass-bg-light: rgb(255 255 255 / 10%);
$glass-bg-medium: rgb(255 255 255 / 15%);
$glass-bg-strong: rgb(255 255 255 / 25%);
$glass-border: rgb(255 255 255 / 20%);
$glass-border-strong: rgb(255 255 255 / 30%);

// 文字颜色
$text-primary: white;
$text-secondary: rgb(255 255 255 / 85%);
$text-muted: rgb(255 255 255 / 70%);
$text-disabled: rgb(255 255 255 / 50%);

// 深色文字（用于白色背景）
$text-dark-primary: #1d2129;
$text-dark-secondary: #4e5969;
$text-dark-muted: #86909c;
$text-dark-disabled: #c9cdd4;

// 阴影系统
$shadow-light: 0 4px 12px rgb(0 0 0 / 10%);
$shadow-medium: 0 6px 20px rgb(0 0 0 / 15%);
$shadow-strong: 0 8px 30px rgb(0 0 0 / 20%);
$shadow-card: 0 2px 8px rgb(0 0 0 / 8%);

// 动画系统
$transition-fast: 0.2s ease;
$transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

// 尺寸系统
$border-radius-small: 6px;
$border-radius-medium: 8px;
$border-radius-large: 12px;
$border-radius-xl: 16px;
$border-radius-round: 50px;

// 间距系统
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;

// 组件样式 (Component Styles)
// ================================

// 玻璃拟态容器
@mixin glass-container($bg: $glass-bg-light, $border: $glass-border) {
  background: $bg;
  border: 1px solid $border;
  border-radius: $border-radius-large;
  backdrop-filter: blur(10px);
  transition: $transition-smooth;
}

// 悬停效果
@mixin hover-lift {
  transition: $transition-smooth;

  &:hover {
    box-shadow: $shadow-medium;
    transform: translateY(-2px);
  }
}

// 按钮样式
@mixin glass-button($bg: $glass-bg-light, $border: $glass-border) {
  @include glass-container($bg, $border);

  padding: 12px 24px;
  font-weight: 500;
  color: $text-primary;
  cursor: pointer;
  border-radius: $border-radius-medium;

  &:hover {
    background: $glass-bg-medium;
    border-color: $glass-border-strong;
    box-shadow: $shadow-light;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }
}

// 主要按钮
@mixin primary-button {
  font-weight: 600;
  color: white;
  background: $accent-gradient;
  border: none;

  &:hover {
    background: linear-gradient(135deg, #66b1ff, #409eff);
    box-shadow: 0 6px 20px rgb(64 158 255 / 40%);
  }
}

// 卡片样式
@mixin glass-card {
  @include glass-container;

  padding: $spacing-lg;

  &:hover {
    background: $glass-bg-medium;
    border-color: $glass-border-strong;
  }
}

// 输入框样式
@mixin glass-input {
  :deep(.el-input) {
    .el-input__wrapper {
      @include glass-container($glass-bg-light, $glass-border);

      border-radius: $border-radius-medium;

      .el-input__inner {
        color: $text-primary;

        &::placeholder {
          color: $text-muted;
        }
      }

      .el-input__prefix-inner,
      .el-input__suffix-inner {
        color: $text-muted;
      }

      &.is-focus {
        background: $glass-bg-strong;
        border-color: $glass-border-strong;
        box-shadow: 0 0 0 2px rgb(255 255 255 / 20%);
      }

      &:hover {
        background: $glass-bg-medium;
        border-color: $glass-border-strong;
      }
    }
  }
}

// 页面布局样式
// ================================

// 全屏背景
@mixin fullscreen-gradient-bg {
  position: relative;
  min-height: 100vh;
  background: $primary-gradient;

  &::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }
}

// 居中容器
@mixin center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-lg;
}

// 内容卡片
@mixin content-card {
  @include glass-container($glass-bg-medium, $glass-border);

  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: $spacing-2xl;
}

// 响应式断点 (以iPhone XR为基准优化)
// ================================

$breakpoint-xs: 375px; // iPhone SE
$breakpoint-sm: 414px; // iPhone XR/11/12/13/14
$breakpoint-md: 768px; // iPad Mini
$breakpoint-lg: 1024px; // iPad Pro
$breakpoint-xl: 1200px; // Desktop
$breakpoint-2xl: 1400px; // Large Desktop

// 移动端断点 (针对iPhone XR优化)
@mixin mobile-xs {
  @media (width <= 374px) {
    @content;
  }
}

@mixin mobile {
  @media (width <= 767px) {
    @content;
  }
}

@mixin mobile-lg {
  @media (width >= 414px) and (width <= 767px) {
    @content;
  }
}

@mixin tablet {
  @media (width >= 768px) and (width <= 1023px) {
    @content;
  }
}

@mixin desktop {
  @media (width >= 1024px) {
    @content;
  }
}

@mixin desktop-lg {
  @media (width >= 1200px) {
    @content;
  }
}

// iPhone XR 专用断点
@mixin iphone-xr {
  @media (width <= 414px) and (height <= 896px) {
    @content;
  }
}

// 移动端容器适配
@mixin mobile-container {
  @media (width <= 767px) {
    max-width: 100%;
    padding: 0 16px;
    margin: 0;
  }

  @media (width <= 374px) {
    padding: 0 12px;
  }
}

// 移动端卡片适配
@mixin mobile-card {
  @media (width <= 767px) {
    margin: 8px 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  }
}

// 移动端文字适配
@mixin mobile-text {
  @media (width <= 767px) {
    font-size: 14px;
    line-height: 1.5;
  }

  @media (width <= 374px) {
    font-size: 13px;
  }
}

// 移动端按钮适配
@mixin mobile-button {
  @media (width <= 767px) {
    min-height: 44px; // iOS推荐的最小触摸目标
    padding: 12px 16px;
    font-size: 16px; // 防止iOS缩放
  }
}

// 工具类
// ================================

.glass-container {
  @include glass-container;
}

.glass-card {
  @include glass-card;
}

.glass-button {
  @include glass-button;
}

.primary-button {
  @include glass-button;
  @include primary-button;
}

.hover-lift {
  @include hover-lift;
}

.fullscreen-bg {
  @include fullscreen-gradient-bg;
}

.center-container {
  @include center-container;
}

.content-card {
  @include content-card;
}

// 文字工具类
.text-primary {
  color: $text-primary;
}

.text-secondary {
  color: $text-secondary;
}

.text-muted {
  color: $text-muted;
}

.text-disabled {
  color: $text-disabled;
}

.text-dark-primary {
  color: $text-dark-primary;
}

.text-dark-secondary {
  color: $text-dark-secondary;
}

.text-dark-muted {
  color: $text-dark-muted;
}

// 间距工具类
.p-xs {
  padding: $spacing-xs;
}

.p-sm {
  padding: $spacing-sm;
}

.p-md {
  padding: $spacing-md;
}

.p-lg {
  padding: $spacing-lg;
}

.p-xl {
  padding: $spacing-xl;
}

.m-xs {
  margin: $spacing-xs;
}

.m-sm {
  margin: $spacing-sm;
}

.m-md {
  margin: $spacing-md;
}

.m-lg {
  margin: $spacing-lg;
}

.m-xl {
  margin: $spacing-xl;
}

// 阴影工具类
.shadow-light {
  box-shadow: $shadow-light;
}

.shadow-medium {
  box-shadow: $shadow-medium;
}

.shadow-strong {
  box-shadow: $shadow-strong;
}

.shadow-card {
  box-shadow: $shadow-card;
}
